<template>
    <div class="app-container falseTabel-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                        border>
                        查看已删门店
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-date-picker :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="date"
                        placeholder="选择日期" :picker-options="pickerOptions" @change="dateChange"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="选择门店" v-model="formInline.store_id" @change="storeChange" filterable
                        style="width:140px">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select placeholder="选择区域" v-model="formInline.area_id" style="width:100px" @change="areaChange"
                        filterable>
                        <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select placeholder="机台类型" v-model="formInline.type_id" style="width:100px" filterable
                        @change="machineTypeChange" :clearable='true'>
                        <el-option v-for="item in machine_type_list" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select placeholder="机台编号" v-model="formInline.project_id" style="width:100px" filterable
                        :clearable='true'>
                        <el-option v-for="item in machine_no_list" :key="item.project_id" :label="item.no"
                            :value="item.project_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.clevice_id" placeholder="请输入卡头ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" prop="type_name" label="机台名称"></el-table-column>
                <el-table-column align="center" prop="no" label="机台编号"></el-table-column>
                <el-table-column align="center" prop="clevice_id" label="卡头ID"></el-table-column>
                <el-table-column align="center" prop="tickets" label="出票数"></el-table-column>
                <el-table-column align="center" prop="create_time" label="出票时间"></el-table-column>
            </el-table>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="20" layout="prev, pager, next, jumper"
                :total="totalDataNumber">
            </el-pagination>
            <span class="pull-right" style="margin-top:10px;">总出票数 {{total_tickets}}</span>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getStoreList,
        getAreaList,
        get_project_type,
        get_project_no,
        getPage
    } from "@/api/storage_control/out_ticket_details";
    export default {
        data() {
            return {
                listLoading: false,
                currentPage: 1,
                totalDataNumber: 0,
                total_tickets: '',
                list: [],
                total: {},
                storeList: null,
                brandList: [],
                machine_type_list: [],
                machine_no_list: [],
                areaList: [],
                formInline: {
                    area_id: '',
                    store_id: '',
                    datetime: '',
                    clevice_id: '',
                    project_id: '',
                    type_id: '',
                    look_del: "0"
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    },
                },
                pickerDate: new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())).toISOString().slice(0, 10).replace('-', '.').replace('-', '.'),
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            dateChange() {
                // this.formInline.type_id = '';
                // this.formInline.project_id = '';
                // this.storeChange();
            },
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: 343 }).then(response => {
                    this.storeList = response;
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    this.storeChange();
                });
            },
            storeChange() {
                this.formInline.type_id = '';
                this.formInline.project_id = '';
                getAreaList({ sid: this.formInline.store_id }).then(response => {
                    this.areaList = response;
                    this.formInline.area_id = response.length > 0 ? response[0].id : '';
                    this.areaChange();
                });
            },
            areaChange() {
                this.getMachineType();
            },
            getMachineType() {
                this.formInline.type_id = '';
                this.formInline.project_id = '';
                this.machine_no_list = [];
                this.formInline.datetime = this.pickerDate ? this.pickerDate : '';
                let data = {
                    datetime: this.formInline.datetime,
                    area_id: this.formInline.area_id,
                    store_id: this.formInline.store_id,
                }
                get_project_type(data).then(response => {
                    this.machine_type_list = response;
                });
            },
            machineTypeChange() {
                this.formInline.project_id = '';
                this.getMachineNo();
            },
            getMachineNo() {
                this.machine_no_list = [];
                this.formInline.datetime = this.pickerDate ? this.pickerDate : '';
                let data = {
                    datetime: this.formInline.datetime,
                    area_id: this.formInline.area_id,
                    store_id: this.formInline.store_id,
                    type_id: this.formInline.type_id,
                };
                get_project_no(data).then(response => {
                    this.machine_no_list = response;
                });
            },
            // 搜索
            searchClick() {
                if (!this.formInline.clevice_id && !this.formInline.project_id) {
                    this.$message({ type: 'error', message: '请选择机台编号再进行查询' });
                    return;
                }
                if (this.formInline.clevice_id === '0') {
                    this.$message({ type: 'error', message: '卡头ID不正确' });
                    return;
                }
                this.fetchData();
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response.page * 20;
                    this.total_tickets = response.tickets;
                    getList(this.formInline).then(response => {
                        this.list = response;
                        this.listLoading = false;
                    })

                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            // 分页
            handleCurrentChange(val) {
                this.listLoading = true;
                getList(this.formInline, val).then(response => {
                    this.list = response;
                    this.listLoading = false;
                })
            },
        }
    };
</script>